<template>
  <div class="tool">
<!--    // "width: 80%;margin: 0 10% 0 10%;padding: 40px 40px"-->
<!--  循环一级目录  -->
    <div style="width: 80%;margin: 0 10% 0 10%">
      <el-carousel :interval="4000" type="card" height="100px">
        <el-carousel-item v-for="(item, index) in firstLevel" :key="index">
          <a @click="getToolData(item)">
            <el-card  :style="{ margin: '0 1% 0 1%', backgroundColor: cardColors[index]}"  @click.native="changeCardColor(index)" >
          <span style="font-size: 20px;font-weight: bold;
               height: 50px; display: flex; justify-content: center; align-items: center;">
            {{item}}
          </span>
            </el-card>
          </a>
        </el-carousel-item>
      </el-carousel>

    </div>
    <!--  循环二级目录  -->
    <template  v-for="(item, index) in secondLevel" >
      <div style="width: 90%;margin: 0 5% 0 5%;padding: 20px 20px">
        <div style="display: flex; align-items: center;margin-bottom: -50px">
          <h3 style="margin-right: 10px;font-size: 30px">{{ item.secondLevelCategories }}</h3>
<!--          <h5 style="font-size: 20px">{{ item.platformRemark }}</h5>-->
        </div>
        <el-divider> </el-divider>

        <el-row :gutter="20">
          <el-col :span="4" v-for="(plist, pIndex) in platformsList" :key="pIndex" v-if="item.secondLevelCategories === plist.secondLevelCategories">
            <el-card>
              <div style="display: flex; align-items: center;justify-content: space-between">
                <img :src="plist.platformLogo" style="vertical-align: middle; width: 25px;height: 25px">

                <a :href="plist.platformUrl" target="_blank" style="margin-right: 5px;">
                  {{ plist.platformName }}
                </a>
              </div>
            </el-card>

          </el-col>
        </el-row>
      </div>
    </template>


    <!--  底部  -->
    <div class="el-tool-footer">
      <span></span>
    </div>
  </div>
</template>


<script>
import { toolListPlatforms, firstLeveList } from "@/api/base/platforms";

export default {
  name: "tool",

  data() {
    // 定义所用的变量
    return {
      platformsList: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        firstLevelCategories: null,
        secondLevelCategories: null
      },

      // 分类列表
      secondLevel: [],
      firstLevel:[],
      searchQuery: '',




    };
  },
  created() {
    // 获取一级分类数据
    this.getFirstLevel();
    //this.preventF12AndRightClick();
  },
  //页面到方法调用流程：点击事件@click,@change 调用方法，方法（框架固定的方法，自定义的方法）
  //调用方法需要传参，参数是在页面获取，方法执行时需要把方法传给谁，

  //调用getToolData方法，传入firstLevel参数，
  // 然后根据firstLevel参数获取数据，并更新secondLevel和platformsList数据。

  methods: {
    // 定义方法

    getToolData(firstLevel) {

      this.queryParams.firstLevelCategories = firstLevel;

      toolListPlatforms(this.queryParams).then(response => {
        this.platformsList = response.rows;
        // 提取 secondLevelCategories 和 platformRemark 字段，并去重
        const uniqueSet = new Set();
        const uniqueArray = [];

        this.platformsList.forEach(item => {
          const key = `${item.secondLevelCategories}-${item.platformRemark}`;
          if (!uniqueSet.has(key)) {
            uniqueSet.add(key);
            uniqueArray.push({
              secondLevelCategories: item.secondLevelCategories,
              platformRemark: item.platformRemark
            });
          }
        });

        this.secondLevel = uniqueArray;

        console.log("获取数据secondLevel", this.secondLevel);

        console.log("获取数据",this.platformsList)
      });
    },
    // 工具分类
    getFirstLevel(){
      firstLeveList({}).then(data => {
        this.firstLevel = data;
        this.queryParams.firstLevelCategories = this.firstLevel[0];
        // 初始化需要调用的方法确保页面加载时有初始数据：
        //如果不调用 this.getToolData(this.firstLevel[0]);，页面加载时只会显示一级分类，而不会显示任何二级分类或平台列表。
//用户需要手动点击某个一级分类才能触发 getToolData 方法，这会导致用户体验不佳。

        this.getToolData(this.firstLevel[0]);
        // 初始化每个 el-card 的背景颜色
        this.cardColors = this.firstLevel.map(() => this.getRandomColor());
        console.log("获取一级分类数据",this.firstLevel)
      });
    },


    // 阻止F12和右键菜单
    preventF12AndRightClick() {
      document.onkeydown = function (e) {
        if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I') || (e.ctrlKey && e.key === 'U')) {
          e.preventDefault();
          alert('调试工具被禁用');
        }
      };

      window.oncontextmenu = function (e) {
        e.preventDefault();
        alert('右键菜单被禁用');
      };

    },
    // 生成随机颜色
    getRandomColor() {
      const r = Math.floor(Math.random() * 56) + 200; // 200 到 255
      const g = Math.floor(Math.random() * 56) + 200; // 200 到 255
      const b = Math.floor(Math.random() * 56) + 200; // 200 到 255
      return `rgb(${r}, ${g}, ${b})`;
    },

    // 改变 el-card 的背景颜色
    changeCardColor(index) {
      this.$set(this.cardColors, index, this.getRandomColor());
    }

  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.tool {
  width: 100%;
  height: auto;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover; /* 确保背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-attachment: fixed; /* 固定背景图片 */
  padding: 20px;
  overflow-y: auto; /* 添加垂直滚动条 */
}

.services, .pictureTools .calculationTools {
  width: 100%;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 8px; /* 添加圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
}


.el-card {
  border-radius: 8px;
  margin-bottom: 20px; /* 确保卡片之间有间距 */
  cursor: pointer; /* 添加鼠标指针样式 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el-row::before, .el-row::after {
  /* display: table; */
  content: "";
}

.el-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 鼠标经过时的阴影效果 */
  background-color: pink;
}

.first-level-row {
  margin-bottom: 20px;
}

.first-level-col {
  display: flex;
  justify-content: center;
}

.first-level-card {
  margin-top: 40px;

  width: 100%;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
  border-radius: 8px; /* 圆角 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.first-level-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 鼠标经过时的阴影效果 */
}
</style>
